<template>
	<div class="tabs">
			<table border="1" cellpadding="0" cellspacing="0" width="500px">
				<tr>
					<th>序号</th>
					<th>姓名</th>
					<th>性别</th>
					<th>身份</th>
					<th>操作</th>
				</tr>
				<tr v-for="(item,index) in person">
					<td>{{item.id}}</td>
					<td>{{item.uname}}</td>
					<td>{{item.gender}}</td>
					<td>{{item.post}}</td>
					<td>
						<button type="button" @click="keli(index)" class="a1">删除</button>
					</td>
				</tr>
			</table>
			<!-- 分页 -->
			<ul v-if="list.length >=3">
				<li class="first" @click="getPage()">
					<router-link to="/?page = 1">首页</router-link>
				</li>
				<li v-for="item in sumpages" @click="getPage()">
					<router-link :to="'/?page='+item">{{item}}</router-link>
				</li>
				<li class="last" @click="getPage()">
					<router-link :to="'/?page='+sumpages">尾页</router-link>
				</li>
			</ul>
		</div>
</template>

<script>
	export default{
		name:'Tabs',
		props:['propmsg'],
			data(){
				return{
					list:[],
					person:[],
					sumpages:0,  //总页数
					num:3,  //每页3条数据
					page:1  ,//默认当前页为第一页
				}
			},
			methods:{
				getPage(){
					//获取地址栏上的当前点击的页码page
					if(this.$route.query.page){
						this.page = Number(this.$route.query.page)
					}
						//计算数组截取的开始和结束位置
					let start = (this.page-1) * this.num
					let end = this.page * this.num;
					this.person = this.list.slice(start , end)
					
				},
				keli(x){
					let a = (this.page-1)*3;
					this.list.splice( x+a , 1 );
					this.getPage();
				}
			},
			watch:{
				propmsg(val){
					//动态添加id值
					let index = this.list.length+1
					this.propmsg.id=index
					//将传递过来的数据添加到数组内
					this.list.push(val)
					this.sumpages = Math.ceil(this.list.length / this.num);
					//调用截取数组的函数，此时默认为第一页的数据
					this.getPage();
				},
			},
	}
</script>

<style>
	.app .tabs{
		padding: 15px;
		text-align: center;
	}
	.app .tabs table{
		width: 100%;
		border: 1px solid #008B8B;
		color: #008B8B;
	}
	.app .tabs table tr a{
		color: #008B8B;
		font-weight: bold;
	}
	.app .tabs ul{
		margin-top: 20px;
		overflow: hidden;
	}
	.app .tabs ul li{float: left;}
	.app .tabs ul li a{
		display: block;
		margin-left: 10px;
		padding-left: 10px;
		padding-right: 10px;
		line-height: 30px;
		text-align: center;
		border: white 1px solid;
		border-radius: 6px;
		color: #008B8B;
	}
	.app .tabs ul li .default,
	.app .tabs ul li a:hover{
		background-color: #008B8B;
		color: white;
	}
	.a1{
		color: #008B8B;
		width: 80px;
		background-color: white;
		height: 25px;
		border-radius: 6px;
		border: none;
	}
</style>
